
<template>
  <div class="user-profile-container">
    <h2>个人资料</h2>
    <div class="user-info">
      <p><strong>用户名:</strong> {{ userInfo.username }}</p>
      <p><strong>邮箱:</strong> {{ userInfo.email }}</p>
      <p><strong>简介:</strong> {{ userInfo.bio }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import Header from './Header.vue';

// 模拟用户信息
const userInfo = ref({
  username: '用户123',
  email: 'user@example.com',
  bio: '这是用户的个人简介。',
});
</script>

<style scoped>
.user-profile-container {
  padding: 20px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
}
</style>